<!DOCTYPE HTML>
<html lang="zh-CN">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="Nginx的使用, Python,HTML,CSS,JavaScript,Web安全等">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Global site tag (gtag.js) - Google Analytics -->


    <title>Nginx的使用 | 孤狼</title>
    <link rel="icon" type="image/png" href="/a.png">

    <link rel="stylesheet" type="text/css" href="/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/css/my.css">

    <script src="/libs/jquery/jquery.min.js"></script>
	<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

<meta name="generator" content="Hexo 5.4.0"><link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>




<body>
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
			<div class="brand-logo">
				<a href="/" class="waves-effect waves-light">
					<div>
						
						<img src="/loading.gif" data-original="/medias/logo.png" class="logo-img" alt="LOGO">
						
						<span class="logo-span">孤狼</span>
					</div>
				</a>
			</div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>首页</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/categories" class="waves-effect waves-light">

      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>分类</span>
      <i class="fas fa-chevron-down" aria-hidden="true" style="zoom: 0.6;"></i>
    </a>
    <ul class="sub-nav menus_item_child ">
      
      <li>
        <a href="/categories/linux">
          
          <span>linux</span>
        </a>
      </li>
      
      <li>
        <a href="/categories/python">
          
          <span>python</span>
        </a>
      </li>
      
      <li>
        <a href="/categories/%E5%8D%9A%E5%AE%A2">
          
          <span>博客</span>
        </a>
      </li>
      
    </ul>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/tags" class="waves-effect waves-light">
      
      <i class="fas fa-tags" style="zoom: 0.6;"></i>
      
      <span>标签</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>归档</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/about" class="waves-effect waves-light">
      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>关于</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/friends" class="waves-effect waves-light">
      
      <i class="fas fa-address-book" style="zoom: 0.6;"></i>
      
      <span>友情链接</span>
    </a>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="搜索" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>


<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="/loading.gif" data-original="/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">孤狼</div>
        <div class="logo-desc">
            
            Never really desperate, only the lost of the soul.
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			首页
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="javascript:;">
			
				<i class="fa-fw fas fa-bookmark"></i>
			
			分类
			<span class="m-icon"><i class="fas fa-chevron-right"></i></span>
		</a>
            <ul  style="background:  ;" >
              
                <li>

                  <a href="/categories/linux " style="margin-left:75px">
				  
		          <span>linux</span>
                  </a>
                </li>
              
                <li>

                  <a href="/categories/python " style="margin-left:75px">
				  
		          <span>python</span>
                  </a>
                </li>
              
                <li>

                  <a href="/categories/%E5%8D%9A%E5%AE%A2 " style="margin-left:75px">
				  
		          <span>博客</span>
                  </a>
                </li>
              
            </ul>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/tags" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-tags"></i>
			
			标签
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			归档
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/about" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-user-circle"></i>
			
			关于
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/friends" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-address-book"></i>
			
			友情链接
		</a>
          
        </li>
        
        
    </ul>
</div>


        </div>

        
    </nav>

</header>

    
<script src="/libs/cryptojs/crypto-js.min.js"></script>
<script>
    (function() {
        let pwd = '';
        if (pwd && pwd.length > 0) {
            if (pwd !== CryptoJS.SHA256(prompt('请输入访问本文章的密码')).toString(CryptoJS.enc.Hex)) {
                alert('密码错误，将返回主页！');
                location.href = '/';
            }
        }
    })();
</script>




<div class="bg-cover pd-header post-cover" style="background-image: url('/medias/featureimages/5.jpg')">
    <div class="container" style="right: 0px;left: 0px;">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <h1 class="description center-align post-title">Nginx的使用</h1>
                </div>
            </div>
        </div>
    </div>
</div>




<main class="post-container content">

    
    <link rel="stylesheet" href="/libs/tocbot/tocbot.css">
<style>
    #articleContent h1::before,
    #articleContent h2::before,
    #articleContent h3::before,
    #articleContent h4::before,
    #articleContent h5::before,
    #articleContent h6::before {
        display: block;
        content: " ";
        height: 100px;
        margin-top: -100px;
        visibility: hidden;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        width: 345px;
        padding-left: 20px;
    }

    .toc-widget .toc-title {
        padding: 35px 0 15px 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content {
        padding-bottom: 30px;
        overflow: auto;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;

        position: absolute;
        right: 23.5vw;
        display: block;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #floating-toc-btn {
        position: fixed;
        right: 15px;
        bottom: 76px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
    }

    #floating-toc-btn .btn-floating {
        width: 48px;
        height: 48px;
    }

    #floating-toc-btn .btn-floating i {
        line-height: 48px;
        font-size: 1.4rem;
    }
</style>
<div class="row">
    <div id="main-content" class="col s12 m12 l9">
        <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                    <div class="article-tag">
                        
                            <a href="/tags/linux/">
                                <span class="chip bg-color">linux</span>
                            </a>
                        
                            <a href="/tags/nginx/">
                                <span class="chip bg-color">nginx</span>
                            </a>
                        
                    </div>
                    
                </div>
                <div class="col s5 right-align">
                    
                    <div class="post-cate">
                        <i class="fas fa-bookmark fa-fw icon-category"></i>
                        
                            <a href="/categories/linux/" class="post-category">
                                linux
                            </a>
                        
                    </div>
                    
                </div>
            </div>

            <div class="post-info">
                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-minus fa-fw"></i>发布日期:&nbsp;&nbsp;
                    2021-03-31
                </div>
                

                

                
                <div class="info-break-policy">
                    <i class="far fa-file-word fa-fw"></i>文章字数:&nbsp;&nbsp;
                    3.8k
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-clock fa-fw"></i>阅读时长:&nbsp;&nbsp;
                    16 分
                </div>
                

                
            </div>
        </div>
        <hr class="clearfix">

        

        

        <div class="card-content article-card-content">
            <div id="articleContent">
                <h1 id="Nginx的基本使用"><a href="#Nginx的基本使用" class="headerlink" title="Nginx的基本使用"></a>Nginx的基本使用</h1><h2 id="1-Nginx的安装"><a href="#1-Nginx的安装" class="headerlink" title="1. Nginx的安装"></a>1. Nginx的安装</h2><ul>
<li><p>a. 首先解决源码编译安装所需的基础开发环境！！！</p>
<pre class=" language-shell"><code class="language-shell">yum install gcc patch libffi-devel python-devel  zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel openssl openssl-devel -y
</code></pre>
</li>
<li><p>b. 下载源代码</p>
<pre class=" language-shell"><code class="language-shell">wget http://tengine.taobao.org/download/tengine-2.3.2.tar.gz
</code></pre>
</li>
<li><p>c. 解压缩tenginx文件</p>
<pre class=" language-shell"><code class="language-shell">tar zxf tengine-2.3.2.tar.gz
</code></pre>
</li>
<li><p>d. 进入源代码目录，指定安装路径，开始编辑安装</p>
<pre class=" language-shell"><code class="language-shell">./configure --prefix=/opt/tngx232
make && make install

# --prefix是指定nginx的安装目录
</code></pre>
</li>
<li><p>d. 配置nginx环境变量</p>
<pre class=" language-shell"><code class="language-shell"># 先进入tenginx的sbin目录，然后把工作目录加入PATH(/etc/profile)环境中
[root@bogon sbin]# pwd
/opt/tngx232/sbin
[root@bogon sbin]# vi /etc/profile
PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/opt/python36/bin:/root/bin:/opt/tngx232/sbin"
# 再手动更新环境变量
[root@bogon sbin]# source /etc/profile
</code></pre>
</li>
<li><p>启动nginx，直接输入nginx命令</p>
<pre class=" language-shell"><code class="language-shell">nginx -t        # 检测ngingx.conf的语法是否正确
nginx -s reload # 平滑重启nginx：不重启nginx，重新读取配置文件，立即生效
nginx -s stop   # 停止nginx
nginx           # 启动nginx
</code></pre>
</li>
<li><p>当然也可以使用yum安装，它可以自动解决安装所需的依赖关系</p>
<pre class=" language-shell"><code class="language-shell">yum install -y nginx
# 安装后nginx首页配置在 /usr/share/nginx/html/index.html
</code></pre>
</li>
</ul>
<h2 id="2-Nginx的目录结构"><a href="#2-Nginx的目录结构" class="headerlink" title="2. Nginx的目录结构"></a>2. Nginx的目录结构</h2><pre class=" language-shell"><code class="language-shell">[root@bogon tngx232]# ls
client_body_temp  conf  fastcgi_temp  html  logs  proxy_temp  sbin  scgi_temp  uwsgi_temp
</code></pre>
<ul>
<li>conf  存放nginx所有配置文件的目录,主要为nginx.conf</li>
<li>html  存放nginx默认站点的目录，如index.html、error.html等</li>
<li>logs   存放nginx默认日志的目录，如error.log access.log</li>
<li>sbin   存放nginx主命令的目录,sbin/nginx</li>
</ul>
<h2 id="3-Nginx的主配置文件"><a href="#3-Nginx的主配置文件" class="headerlink" title="3. Nginx的主配置文件"></a>3. Nginx的主配置文件</h2><ol>
<li><p>修改nginx的server虚拟主机的端口以及各种配置</p>
<pre class=" language-shell"><code class="language-shell"># 第一个虚拟主机的功能
    server &#123;
        listen       80;    # 监听端口
        server_name  localhost;   # 定义网站的域名
        #charset koi8-r;

        #access_log  logs/host.access.log  main;    # 定义第一个虚拟主机的网站访问日志
        #access_log  "pipe:rollback logs/host.access_log interval=1d baknum=7 maxsize=2G"  main;
        
        # nginx的url匹配，/ 这个斜杠就代表这样的请求：192.168.19.129::80/
        # 这是最低级匹配，所有的请求都会进入location，进行处理
        location / &#123;
            # root参数用于定义网页根目录，可以写成绝对或者相对路径
            root   html;
            # index参数用于定义网站首页的名字
            index  index.html index.htm;
        &#125;
        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html &#123;
            root   html;
        &#125;
    &#125;
</code></pre>
</li>
<li><p>dns客户端配置文件</p>
<pre class=" language-shell"><code class="language-shell">/etc/resolv.conf
# 修改如下内容
nameserver 192.168.19.2 # nameserver填写值是 公网的dns服务器
                        # 8.8.8.8 谷歌的公网dns
                        # 114.114.114.114
                        # 223.5.5.5
                        # 223.6.6.6 阿里巴巴的dns
                        # 119.29.29.29  腾讯的dns服务器
# C:\Windows\System32\drivers\etc 这个是windows的hosts文件
</code></pre>
</li>
<li><p>nginx的多虚拟主机功能</p>
<p>nginx的配置文件，多个虚拟主机默认是自上而下的加载顺序，有先后顺序</p>
<ul>
<li><p>基于域名的多虚拟主机  hosts文件，本地dns解析</p>
<ul>
<li><p>第一步：在nginx.conf中配置两个server{}</p>
<pre class=" language-shell"><code class="language-shell"># 第一个虚拟主机的功能
server &#123;
        listen       80;    # 监听端口
        server_name  www.testlol.com;   # 定义网站的域名
        location / &#123;
            # root参数用于定义网页根目录，可以写成绝对或者相对路径
            root   /opt/testlol;
            # index参数用于定义网站首页的名字
            index  index.html index.htm;
        &#125;
        error_page   500 502 503 504  /50x.html;
        location = /50x.html &#123;
            root   html;
        &#125;
    &#125;
# 第二个虚拟主机的功能
server &#123;
        listen       80;
        server_name  www.testhanju.com;

        location / &#123;
            root   /opt/testhanju;
            index  index.html index.htm;
        &#125;
    &#125;
</code></pre>
</li>
<li><p>第二步：分别创建/opt/testlol 和 /opt/testhanju的文件夹，且创建资料</p>
</li>
<li><p>第三步：在windows下修改hosts文件，填入以下内容</p>
<pre class=" language-shell"><code class="language-shell">192.168.19.128  www.testlol.com
192.168.19.128  www.testhanju.com
</code></pre>
</li>
</ul>
</li>
<li><p>基于端口的多虚拟主机</p>
</li>
</ul>
</li>
<li><p>nginx404页面优化</p>
<pre class=" language-shell"><code class="language-shell">location / &#123;
            root   html;
            index  index.html index.htm;
        &#125;
error_page  404   /404.html;
</code></pre>
</li>
<li><p>nginx的访问日志功能，监测用户的来源ip，访问时间,客户端地址信息</p>
<pre class=" language-shell"><code class="language-shell">http &#123;
    include       mime.types;
    default_type  application/octet-stream;
    # 日志格式           远程ip地址       访问用户      访问时间       请求的资源
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      # 状态码   发了多少bytes数据
                      '$status $body_bytes_sent "$http_referer" '
                      # 请求体(手机、PC)     # 解析代理池
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  logs/access.log  main;
    access_log  "pipe:rollback logs/access_log interval=1d baknum=7 maxsize=2G"  main;
</code></pre>
</li>
</ol>
<hr>
<hr>
<hr>
<h1 id="Nginx进阶使用"><a href="#Nginx进阶使用" class="headerlink" title="Nginx进阶使用"></a>Nginx进阶使用</h1><h2 id="nginx-代理功能"><a href="#nginx-代理功能" class="headerlink" title="nginx 代理功能"></a>nginx 代理功能</h2><p>准备两台机器，保证两台机器通信</p>
<p>192.128.13.117  (资源网址，为了方便简单提供一个静态页面)</p>
<p>192.168.13.xx  (反向代理机器，是nginx提供的功能)</p>
<p>配置步骤</p>
<p>1、准备资源服务器</p>
<p>2、配置代理服务器</p>
<pre class=" language-shell"><code class="language-shell">server &#123;
        listen       80;
        server_name  localhost;
        location / &#123;
                proxy_pass http://192.168.65.129;
        &#125;
&#125;
</code></pre>
<p>3、在windows中的浏览器，客户端，访问代理机器，查看资源地址</p>
<h2 id="nginx-负载均衡配置"><a href="#nginx-负载均衡配置" class="headerlink" title="nginx 负载均衡配置"></a>nginx 负载均衡配置</h2><p>准备3台机器</p>
<p>192.168.19.128   资源地址(模拟django机器1)</p>
<p>192.168.19.129   反向代理机器(基于nginx搭建，进行代理，转发)</p>
<p>192.168.19.130    资源地址(模拟django机器1)</p>
<ul>
<li><p>a. 分别准备好2台资源机器(都用nginx模拟资源，因此都需要安装nginx)</p>
<p>访问192.168.12.128看到一个这个ip的地址(用去区分)</p>
<p>访问</p>
</li>
<li><p>b. 准备反向代理机器,192.168.19.129,当我们访问代理机器的时候，进行配置不同的分发规则，查看效果</p>
<p>修改nginx.conf，配置规则如下，负载均衡还是在http中配置：</p>
<pre class=" language-shell"><code class="language-shell"># 在server的上面，添加负载均衡
    upstream myserver&#123;
            # 默认负载算法是 轮询方式
            server 192.168.19.128;
            server 192.168.19.130;
    &#125;
    server &#123;
        listen       80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;
        include /etc/nginx/default.d/*.conf;
        location / &#123;
        # proxy_pass是基于http协议的请求转发
        # uwsgi_pass 结合python的uWSGI服务器,进行协同工作的
        proxy_pass  http://myserver;
        &#125;
</code></pre>
</li>
</ul>
<h3 id="负载均衡调度算法"><a href="#负载均衡调度算法" class="headerlink" title="负载均衡调度算法"></a>负载均衡调度算法</h3><table>
<thead>
<tr>
<th>调度算法</th>
<th>概述</th>
</tr>
</thead>
<tbody><tr>
<td>轮询</td>
<td>按时间顺序逐一分配到不同的后端服务器(默认)</td>
</tr>
<tr>
<td>weight</td>
<td>加权轮询，weight值越大，分配到的访问几率越高</td>
</tr>
<tr>
<td>ip_hash</td>
<td>每个请求按访问IP的hash结果分配,这样来自同一IP的固定访问一个后端服务器</td>
</tr>
<tr>
<td>url_hash</td>
<td>按照访问URL的hash结果来分配请求,是每个URL定向到同一个后端服务器</td>
</tr>
<tr>
<td>least_conn</td>
<td>最少链接数,那个机器链接数少就分发</td>
</tr>
</tbody></table>
<ol>
<li><p>轮询(不做配置，默认轮询)</p>
</li>
<li><p>weight权重(优先级)</p>
</li>
<li><p>ip_hash配置，根据客户端ip哈希分配，不能和weight一起用</p>
</li>
</ol>
<ul>
<li><p>weight权重机制</p>
<pre class=" language-shell"><code class="language-shell">upstream myserver&#123;
            # 5次访问中128一次1304次
            server 192.168.19.128 weight=1;
            server 192.168.19.130 weight=4;
    &#125;
</code></pre>
</li>
<li><p>ip_hash机制，不得与权重一起使用</p>
<pre class=" language-shell"><code class="language-shell">upstream myserver&#123;
            # 5次访问中128一次1304次
            server 192.168.19.128 weight=1;
            server 192.168.19.130 weight=4;
            ip_hash;
    &#125;
</code></pre>
<p>负载均衡可参考博客：<a target="_blank" rel="noopener" href="https://www.cnblogs.com/pyyu/p/10004681.html">https://www.cnblogs.com/pyyu/p/10004681.html</a></p>
</li>
</ul>
<hr>
<hr>
<hr>
<h1 id="实战项目部署"><a href="#实战项目部署" class="headerlink" title="实战项目部署"></a>实战项目部署</h1><h2 id="CRM项目部署"><a href="#CRM项目部署" class="headerlink" title="CRM项目部署"></a>CRM项目部署</h2><p>nginx(前端入口)+uwsgi+django(后台)+virtualenvwrapper+supervisor(进程管理工具)+mysql(mariadb) 部署</p>
<p>项目部署发布参考：<a target="_blank" rel="noopener" href="https://www.luffycity.com/micro/play/18321">https://www.luffycity.com/micro/play/18321</a></p>
<p>python的web框架：django和flask最火。tornado、sanic(最快的框架,赶上go语言的qps了)</p>
<ol>
<li>为什么用nginx</li>
</ol>
<p>nginx处理静态文件，且支持请求匹配，请求封禁，暴露在公网，比较安全，且负载均衡</p>
<ol start="2">
<li>为什么用uwsgi启动django呢</li>
</ol>
<p>默认django用的是wsigre单机模块，单进程，性能很低</p>
<p>python3 manage.py runserver  仅仅是用来调试django代码，是否能启动的</p>
<p>在线上，使用uwsgi命令启动django，支持多线程，支持并发等等配置</p>
<h3 id="MyBlog部署安装"><a href="#MyBlog部署安装" class="headerlink" title="MyBlog部署安装"></a>MyBlog部署安装</h3><h4 id="第一步：配置数据库并导入数据"><a href="#第一步：配置数据库并导入数据" class="headerlink" title="第一步：配置数据库并导入数据"></a>第一步：配置数据库并导入数据</h4><ul>
<li><p>1、启动mariadb数据库</p>
<ul>
<li><p>a. 配置yum源</p>
<pre class=" language-shell"><code class="language-shell">yum install mariadb-server mariadb -y
</code></pre>
</li>
<li><p>b. 通过yum安装的软件，怎么启动</p>
<pre class=" language-shell"><code class="language-shell">systemctl  start/stop/status/restart  mariadb
</code></pre>
</li>
<li><p>c. 登录数据库</p>
<pre class=" language-shell"><code class="language-shell">mysql -uroot -p
</code></pre>
</li>
</ul>
</li>
<li><p>2、导出window数据库数据，导入给linux机器</p>
<ul>
<li><p>d. 导出命令</p>
<pre class=" language-shell"><code class="language-shell">mysqldump -uroot -p --databases crm > d:\db_crm.sql  # 指定数据库导出到db_crm.sql中
</code></pre>
</li>
<li><p>e. 传输到linux中，进行导入</p>
<p>简单的利用 lrzsz 工具进行传输</p>
<pre class=" language-shell"><code class="language-shell">rz   # 从win传输到linux
sz 文件名  # 指定文件向win发送
</code></pre>
<p>导入数据库的命令</p>
<pre class=" language-mysql"><code class="language-mysql">soruce db_crm.sql;
</code></pre>
</li>
</ul>
</li>
</ul>
<h4 id="第二步：准备python3环境，以及虚拟环境"><a href="#第二步：准备python3环境，以及虚拟环境" class="headerlink" title="第二步：准备python3环境，以及虚拟环境"></a>第二步：准备python3环境，以及虚拟环境</h4><ul>
<li><p>1、编译安装python3，解决环境变量</p>
</li>
<li><p>2、下载virtualenvwrapper工具</p>
<pre class=" language-shell"><code class="language-shell">pip3 install virtualenvwrapper
</code></pre>
</li>
<li><p>3、使用mkvirtualenv 命令，创建新的虚拟环境，用于启动crm</p>
<pre class=" language-shell"><code class="language-shell">mkvirtualenv crmenv
</code></pre>
</li>
<li><p>4、拷贝crm代码，到 linux机器</p>
</li>
<li><p>5、解决crm运行所需的依赖环境、django等模块、以及pymysql</p>
<p>解决方法1：</p>
<p>根据一个一个报错进行安装解决</p>
<p>解决方法2：</p>
<pre class=" language-shell"><code class="language-shell">pip3 freeze > requirements.txt  # 导出pip所有模块到requirements中
pip3 install -r requirements.txt  # 指定依赖文件安装，读取文件中所有模块信息
</code></pre>
</li>
</ul>
<h4 id="第三步：安装uwsgi"><a href="#第三步：安装uwsgi" class="headerlink" title="第三步：安装uwsgi"></a>第三步：安装uwsgi</h4><ul>
<li><p>1、通过pip3安装</p>
<pre class=" language-shell"><code class="language-shell">pip3 install uwsgi -i https://pypi.douban.com/simple
</code></pre>
</li>
<li><p>2、通过uwsig命令启动django</p>
<ul>
<li><p>启动方式1(只是练习用)：通过命令和参数形式</p>
<pre class=" language-shell"><code class="language-shell"># 语法：uwsgi --http :8000 --module  项目名.wsgi
             --http # 指定http协议启动socket服务端，可以通过浏览器直接访问
             --module # 是找到crm项目第二级目录下的wsgi.py文件
uwsgi --http :8000 --module CRM_project.wsgi
</code></pre>
</li>
<li><p>启动方式2(通过配置文件方式启动，线上是这么启动)</p>
<p>uwsgi的配置文件 uwsgi.ini</p>
<ul>
<li><p>a. 创建配置文件</p>
<pre class=" language-shell"><code class="language-shell">touch uwsgi.ini
</code></pre>
</li>
<li><p>b. 配置 uwsgi.ini 文件</p>
<pre class=" language-shell"><code class="language-shell">[uwsgi]
# Django-related settings
# the base directory (full path)
# 填写django项目的绝对路径,第一层
chdir           = /opt/mysite
# Django's wsgi file
# 填写crm项目第二层目录中的wsgi文件
module          = mysite.wsgi
# the virtualenv (full path)
# 填写解释器的安装的绝对路径(第一层，也就是bin上面一级)(虚拟环境)
home            = /opt/venv
# process-related settings
# master
master          = true
# maximum number of worker processes
# 指定uwsgi的多进程数量,指定为cpu的核数即可(2*cup核数+1)
processes       = 1
# the socket (use the full path to be safe
# 指定crm启动的协议,当你和nginx结合进行反向代理,就用unix-socket协议,这种方式无法直接访问,只能通过nginx进行反代
socket          = 0.0.0.0:8000
# 指定http协议启动，不安全，没有意义，只是自己调试使用
# http = 0.0.0.0:8000
# ... with appropriate permissions - may be needed
# chmod-socket    = 664
# clear environment on exit
vacuum          = true
</code></pre>
</li>
<li><p>c. 指定uwsgi.ini配置文件启动</p>
<pre class=" language-shell"><code class="language-shell">uwsgi --ini uwsgi.ini  # 参数 --ini是指定文件的意思
</code></pre>
</li>
</ul>
</li>
</ul>
</li>
<li><p>3、收集django的所有静态文件，丢给nginx去处理</p>
<ul>
<li><p>打开django的settings.py文件，修改为如下行：</p>
<pre class=" language-shell"><code class="language-shell">STATIC_ROOT='/opt/Blog/blogstatic/'  # 只需加上这个参数即可
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'static')
]
</code></pre>
</li>
<li><p>通过命令收集django的所有静态文件</p>
<pre class=" language-shell"><code class="language-shell">python3 manage.py collectstatic
</code></pre>
</li>
</ul>
</li>
</ul>
<h4 id="第四步：启动nginx，配置反向代理"><a href="#第四步：启动nginx，配置反向代理" class="headerlink" title="第四步：启动nginx，配置反向代理"></a>第四步：启动nginx，配置反向代理</h4><ul>
<li><p>1、安装nginx</p>
</li>
<li><p>2、修改配置文件 nginx.conf</p>
<p>注意server{} 多虚拟主机是自上而下的加载顺序</p>
<p>因此修改第一个 server{} 虚拟主机，修改为如下反代的写法</p>
<pre class=" language-shell"><code class="language-shell">server &#123;
        listen       80;
        server_name  localhost;

        location / &#123;
        # 基于uwsgi协议的请求转发，给后端django的启动地址
        uwsgi_pass   0.0.0.0:8000;  # 这个是请求转发
        include uwsgi_params;       # 这个是添加一个文件，添加请求头信息的
        &#125;
&#125;
</code></pre>
</li>
<li><p>3、添加nginx处理django的静态文件(要执行第三步3)</p>
<p>在第一个 server{} 虚拟主机中新增一个  location：</p>
<pre class=" language-shell"><code class="language-shell"># 当以后请求是从static开始，我就让他去这个目录去找
location /static &#123;   # 不加斜杠
    alias /opt/Blog/blogstatic;
&#125;
</code></pre>
</li>
</ul>
<h2 id="部署前后端分离项目"><a href="#部署前后端分离项目" class="headerlink" title="部署前后端分离项目"></a>部署前后端分离项目</h2><h3 id="前后端项目部署安装"><a href="#前后端项目部署安装" class="headerlink" title="前后端项目部署安装"></a>前后端项目部署安装</h3><p>nginx + vue 端口是80，看到路飞首页</p>
<p>vue向后台发起数据请求，首先找到的是nginx反代，此时这个反代端口是多少</p>
<p>1、前端(nginx+vue)</p>
<p>vue点击课程列表动作，向后台发起数据请求</p>
<p>drf启动(它不是http协议，而是uwsgi-socket协议，无法直接访问，必须通过nginx反代实现,虚拟主机实现的)</p>
<p>2、解压缩代码，修改vue的提交数据地址，以及编译打包生成dist</p>
<p>修改这个提交数据地址的js文件</p>
<pre class=" language-shell"><code class="language-shell"># 地址：/opt/luffys23/07-luffy_project_01/src/restful
# sed 处理文件内容的命令
# 语法：sed -i "s/你想替换的内容/替换之后的内容/g" 文件名
# -i 将替换结果写入到文件,如果不写-i,只是显示替换后的结果；s是替换模式；g是global全局替换
sed -i "s/127.0.0.1:8000/192.168.65.129:8001/g" api.js
</code></pre>
<p>3、配置node.js环境</p>
<pre class=" language-shell"><code class="language-shell"># 1.下载node源码
wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
# 2.解压缩,由于这是编译好的二进制命令压缩包,直接配置环境变量即可使用
tar -zxvf node-v8.6.0-linux-x64.tar.gz
# 3.配置PATH
vim /etc/profile
PATH="/opt/luffys23/node-v8.6.0-linux-x64/bin"
# 4.读取/etc/profile，手动生效
source /etc/profile
# 5.查看node和npm的版本，是否正常
node -v
npm -v
</code></pre>
<p>4、开始安装vue项目所需的node模块，默认找到当前文件夹的package.json文件(可以配置淘宝nginx源)</p>
<pre class=" language-shell"><code class="language-shell"># 更换源
npm config set registry https://registry.npm.taobao.org
npm list
# 安装
npm install
</code></pre>
<p>5、编译vue代码，生成dist</p>
<pre class=" language-shell"><code class="language-shell">npm run build
</code></pre>
<p>6、此时生成dist文件夹之后，可以丢给nginx去解析了</p>
<p>7、配置nginx.conf如下</p>
<pre class=" language-shell"><code class="language-shell"># 1.配置第一个虚拟主机，返回路飞的首页内容
server &#123;
        listen 81;
        server_name localhost;
        location / &#123;
            root /opt/luffys23/07-luffy_project_01/dist;
            index index.html;
        &#125;
    &#125;
# 2.
server &#123;
        listen 8001;
        server_name _;
        location / &#123;
            include uwsgi_params;
            uwsgi_pass 0.0.0.0:8002;
        &#125;
    &#125;
</code></pre>
<p>8、配置drf的后端，提供数据支撑</p>
<p>获取后台代码</p>
<p>创建新的虚拟环境</p>
<pre class=" language-shell"><code class="language-shell">mkvirtualenv luffys23
</code></pre>
<p>解决模块依赖问题</p>
<pre class=" language-shell"><code class="language-shell"># 导出本地模块或手写文件
pip3 freeze > requirements.txt
# 安装模块
pip3 install -r requirements.txt
</code></pre>
<p>9、配置uwsgi和配置文件，启动drf</p>
<pre class=" language-shell"><code class="language-shell">pip3 install uwsgi
</code></pre>
<p>10、写一个uwsgi.ini配置文件启动</p>
<ul>
<li><p>创建uwsgi.ini文件</p>
</li>
<li><p>写入配置</p>
<pre class=" language-shell"><code class="language-shell">[uwsgi]
# Django-related settings
# the base directory (full path)
# 填写django项目的绝对路径,第一层
chdir           = /opt/luffys23/luffy_boy 
# Django's wsgi file
# 填写crm项目第二层目录中的wsgi文件
module          = luffy_boy.wsgi
# the virtualenv (full path)
# 填写解释器的安装的绝对路径(虚拟环境)
home            = /root/Envs/luffys23
# process-related settings
# master
master          = true
# maximum number of worker processes
# 指定uwsgi的多进程数量,指定为cpu的核数即可(填cpu的4倍数量)
processes       = 1
# the socket (use the full path to be safe
# 指定crm启动的协议,当你和nginx结合进行反向代理,就用unix-socket协议,这种方式无法直接访问,只能通过nginx进行反代
socket          = 0.0.0.0:8002
# 指定http协议启动，不安全，没有意义，只是自己调试使用
# http = 0.0.0.0:8000
# ... with appropriate permissions - may be needed
# chmod-socket    = 664
# clear environment on exit
vacuum          = true
</code></pre>
</li>
<li><p>启动uwsgi</p>
<pre class=" language-shell"><code class="language-shell">uwsgi --ini uwsgi.ini
</code></pre>
</li>
</ul>
<p>11、登录</p>
<p>账号：alex  密码：alex3714</p>
<p>12、安装redis数据库，可以用于购物车功能</p>
<pre class=" language-shell"><code class="language-shell">yum install redis -y
</code></pre>
<p>13、启动redis</p>
<pre class=" language-shell"><code class="language-shell">systemctl start redis
</code></pre>
<p>14、验证登录redis</p>
<pre class=" language-shell"><code class="language-shell">[root@localhost luffy_boy]# redis-cli
127.0.0.1:6379> ping
PONG
</code></pre>
<p>15、检查redis的key信息</p>
<pre class=" language-shell"><code class="language-shell">127.0.0.1:6379> keys *
(empty list or set)
</code></pre>
<p>16、解决路飞首页刷新404问题的方法</p>
<pre class=" language-shell"><code class="language-shell">server &#123;
        listen 81;
        server_name localhost;
        location / &#123;
            root /opt/luffys23/07-luffy_project_01/dist;
            index index.html;
            try_files $uri $uri/ /index.html;#这一条参数确保vue页面刷新时候，不会出现404页面
        &#125;
    &#125;
</code></pre>

                
            </div>
            <hr/>

            

    <div class="reprint" id="reprint-statement">
        
            <div class="reprint__author">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-user">
                        文章作者:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="/about" rel="external nofollow noreferrer">aze</a>
                </span>
            </div>
            <div class="reprint__type">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-link">
                        文章链接:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="https://alinze.gitee.io/posts/36914.html">https://alinze.gitee.io/posts/36914.html</a>
                </span>
            </div>
            <div class="reprint__notice">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-copyright">
                        版权声明:
                    </i>
                </span>
                <span class="reprint-info">
                    本博客所有文章除特別声明外，均采用
                    <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                    许可协议。转载请注明来源
                    <a href="/about" target="_blank">aze</a>
                    !
                </span>
            </div>
        
    </div>

    <script async defer>
      document.addEventListener("copy", function (e) {
        let toastHTML = '<span>复制成功，请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>';
        M.toast({html: toastHTML})
      });

      function navToReprintStatement() {
        $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
      }
    </script>



            <div class="tag_share" style="display: block;">
                <div class="post-meta__tag-list" style="display: inline-block;">
                    
                        <div class="article-tag">
                            
                                <a href="/tags/linux/">
                                    <span class="chip bg-color">linux</span>
                                </a>
                            
                                <a href="/tags/nginx/">
                                    <span class="chip bg-color">nginx</span>
                                </a>
                            
                        </div>
                    
                </div>
                <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
                    <link rel="stylesheet" type="text/css" href="/libs/share/css/share.min.css">
<div id="article-share">

    
    <div class="social-share" data-sites="twitter,facebook,google,qq,qzone,wechat,weibo,douban,linkedin" data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div>
    <script src="/libs/share/js/social-share.min.js"></script>
    

    

</div>

                </div>
            </div>
            
                <style>
    #reward {
        margin: 40px 0;
        text-align: center;
    }

    #reward .reward-link {
        font-size: 1.4rem;
        line-height: 38px;
    }

    #reward .btn-floating:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    #rewardModal {
        width: 320px;
        height: 350px;
    }

    #rewardModal .reward-title {
        margin: 15px auto;
        padding-bottom: 5px;
    }

    #rewardModal .modal-content {
        padding: 10px;
    }

    #rewardModal .close {
        position: absolute;
        right: 15px;
        top: 15px;
        color: rgba(0, 0, 0, 0.5);
        font-size: 1.3rem;
        line-height: 20px;
        cursor: pointer;
    }

    #rewardModal .close:hover {
        color: #ef5350;
        transform: scale(1.3);
        -moz-transform:scale(1.3);
        -webkit-transform:scale(1.3);
        -o-transform:scale(1.3);
    }

    #rewardModal .reward-tabs {
        margin: 0 auto;
        width: 210px;
    }

    .reward-tabs .tabs {
        height: 38px;
        margin: 10px auto;
        padding-left: 0;
    }

    .reward-content ul {
        padding-left: 0 !important;
    }

    .reward-tabs .tabs .tab {
        height: 38px;
        line-height: 38px;
    }

    .reward-tabs .tab a {
        color: #fff;
        background-color: #ccc;
    }

    .reward-tabs .tab a:hover {
        background-color: #ccc;
        color: #fff;
    }

    .reward-tabs .wechat-tab .active {
        color: #fff !important;
        background-color: #22AB38 !important;
    }

    .reward-tabs .alipay-tab .active {
        color: #fff !important;
        background-color: #019FE8 !important;
    }

    .reward-tabs .reward-img {
        width: 210px;
        height: 210px;
    }
</style>

<div id="reward">
    <a href="#rewardModal" class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red">赏</a>

    <!-- Modal Structure -->
    <div id="rewardModal" class="modal">
        <div class="modal-content">
            <a class="close modal-close"><i class="fas fa-times"></i></a>
            <h4 class="reward-title">你的赏识是我前进的动力</h4>
            <div class="reward-content">
                <div class="reward-tabs">
                    <ul class="tabs row">
                        <li class="tab col s6 alipay-tab waves-effect waves-light"><a href="#alipay">支付宝</a></li>
                        <li class="tab col s6 wechat-tab waves-effect waves-light"><a href="#wechat">微 信</a></li>
                    </ul>
                    <div id="alipay">
                        <img src="/loading.gif" data-original="/medias/reward/alipay.jpg" class="reward-img" alt="支付宝打赏二维码">
                    </div>
                    <div id="wechat">
                        <img src="/loading.gif" data-original="/medias/reward/wechat.png" class="reward-img" alt="微信打赏二维码">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('.tabs').tabs();
    });
</script>

            
        </div>
    </div>

    

    

    

    

    

    

    

    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fas fa-chevron-left"></i>&nbsp;上一篇</div>
            <div class="card">
                <a href="/posts/26528.html">
                    <div class="card-image">
                        
                        
                        <img src="/loading.gif" data-original="/medias/featureimages/11.jpg" class="responsive-img" alt="Redis的使用及高可用部署">
                        
                        <span class="card-title">Redis的使用及高可用部署</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            
                        
                    </div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <i class="far fa-clock fa-fw icon-date"></i>2021-03-31
                        </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/linux/" class="post-category">
                                    linux
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/linux/">
                        <span class="chip bg-color">linux</span>
                    </a>
                    
                    <a href="/tags/redis/">
                        <span class="chip bg-color">redis</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                下一篇&nbsp;<i class="fas fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="/posts/38573.html">
                    <div class="card-image">
                        
                        
                        <img src="/loading.gif" data-original="/medias/featureimages/14.jpg" class="responsive-img" alt="celery">
                        
                        <span class="card-title">celery</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2021-03-31
                            </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/python/" class="post-category">
                                    python
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/python/">
                        <span class="chip bg-color">python</span>
                    </a>
                    
                    <a href="/tags/Celery/">
                        <span class="chip bg-color">Celery</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</article>

</div>



<!-- 代码块功能依赖 -->
<script type="text/javascript" src="/libs/codeBlock/codeBlockFuction.js"></script>

<!-- 代码语言 -->

<script type="text/javascript" src="/libs/codeBlock/codeLang.js"></script>


<!-- 代码块复制 -->

<script type="text/javascript" src="/libs/codeBlock/codeCopy.js"></script>


<!-- 代码块收缩 -->

<script type="text/javascript" src="/libs/codeBlock/codeShrink.js"></script>


    </div>
    <div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
        <div class="toc-widget card" style="background-color: white;">
            <div class="toc-title"><i class="far fa-list-alt"></i>&nbsp;&nbsp;目录</div>
            <div id="toc-content"></div>
        </div>
    </div>
</div>

<!-- TOC 悬浮按钮. -->

<div id="floating-toc-btn" class="hide-on-med-and-down">
    <a class="btn-floating btn-large bg-color">
        <i class="fas fa-list-ul"></i>
    </a>
</div>


<script src="/libs/tocbot/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingsOffset: -($(window).height() * 0.4 - 45),
            collapseDepth: Number('0'),
            headingSelector: 'h2, h3, h4'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h2, h3, h4').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });

        
        /* 修复文章卡片 div 的宽度. */
        let fixPostCardWidth = function (srcId, targetId) {
            let srcDiv = $('#' + srcId);
            if (srcDiv.length === 0) {
                return;
            }

            let w = srcDiv.width();
            if (w >= 450) {
                w = w + 21;
            } else if (w >= 350 && w < 450) {
                w = w + 18;
            } else if (w >= 300 && w < 350) {
                w = w + 16;
            } else {
                w = w + 14;
            }
            $('#' + targetId).width(w);
        };

        // 切换TOC目录展开收缩的相关操作.
        const expandedClass = 'expanded';
        let $tocAside = $('#toc-aside');
        let $mainContent = $('#main-content');
        $('#floating-toc-btn .btn-floating').click(function () {
            if ($tocAside.hasClass(expandedClass)) {
                $tocAside.removeClass(expandedClass).hide();
                $mainContent.removeClass('l9');
            } else {
                $tocAside.addClass(expandedClass).show();
                $mainContent.addClass('l9');
            }
            fixPostCardWidth('artDetail', 'prenext-posts');
        });
        
    });
</script>

    

</main>




    <footer class="page-footer bg-color">
    
        <link rel="stylesheet" href="/libs/aplayer/APlayer.min.css">
<style>
    .aplayer .aplayer-lrc p {
        
        display: none;
        
        font-size: 12px;
        font-weight: 700;
        line-height: 16px !important;
    }

    .aplayer .aplayer-lrc p.aplayer-lrc-current {
        
        display: none;
        
        font-size: 15px;
        color: #42b983;
    }

    
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
        left: -66px !important;
    }

    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
        left: 0px !important;
    }

    
</style>
<div class="">
    
    <div class="row">
        <meting-js class="col l8 offset-l2 m10 offset-m1 s12"
                   server="netease"
                   type="playlist"
                   id="355992"
                   fixed='true'
                   autoplay='false'
                   theme='#42b983'
                   loop='all'
                   order='random'
                   preload='auto'
                   volume='0.7'
                   list-folded='true'
        >
        </meting-js>
    </div>
</div>

<script src="/libs/aplayer/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

    
    <div class="container row center-align" style="margin-bottom: 15px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            
                <span id="year">2021-2022</span>
            
            <span id="year">2021</span>
            <a href="/about" target="_blank">aze</a>
            |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>
            
            
            
            
            
			 
            <span id="busuanzi_container_site_pv">
                |&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;<span id="busuanzi_value_site_pv"
                    class="white-color"></span>&nbsp;次
            </span>
             
             
            <span id="busuanzi_container_site_uv">
                |&nbsp;<i class="fas fa-users"></i>&nbsp;总访问人数:&nbsp;<span id="busuanzi_value_site_uv"
                    class="white-color"></span>&nbsp;人
            </span>
             
            <br>
            
            <span id="sitetime">载入运行时间...</span>
            <script>
                function siteTime() {
                    var seconds = 1000;
                    var minutes = seconds * 60;
                    var hours = minutes * 60;
                    var days = hours * 24;
                    var years = days * 365;
                    var today = new Date();
                    var startYear = "2021";
                    var startMonth = "3";
                    var startDate = "14";
                    var startHour = "0";
                    var startMinute = "0";
                    var startSecond = "0";
                    var todayYear = today.getFullYear();
                    var todayMonth = today.getMonth() + 1;
                    var todayDate = today.getDate();
                    var todayHour = today.getHours();
                    var todayMinute = today.getMinutes();
                    var todaySecond = today.getSeconds();
                    var t1 = Date.UTC(startYear, startMonth, startDate, startHour, startMinute, startSecond);
                    var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
                    var diff = t2 - t1;
                    var diffYears = Math.floor(diff / years);
                    var diffDays = Math.floor((diff / days) - diffYears * 365);
                    var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
                    var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) /
                        minutes);
                    var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                        diffMinutes * minutes) / seconds);
                    if (startYear == todayYear) {
                        document.getElementById("year").innerHTML = todayYear;
                        document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffDays + " 天 " + diffHours +
                            " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                    } else {
                        document.getElementById("year").innerHTML = startYear + " - " + todayYear;
                        document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffYears + " 年 " + diffDays +
                            " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                    }
                }
                setInterval(siteTime, 1000);
            </script>
            
            <br>
            
        </div>
        <div class="col s12 m4 l4 social-link social-statis">


    <a href="https://gitee.com/alinze" class="tooltipped" target="_blank" data-tooltip="访问我的Gitee" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="mailto:1124302640@qq.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>







    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1124302640" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 1124302640" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>







    <a href="https://www.cnblogs.com/L521Z" class="tooltipped" target="_blank" data-tooltip="关注我的博客园: https://www.cnblogs.com/L521Z" data-position="top" data-delay="50">
        <i class="fab fa-juejin">博</i>
    </a>



</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    var searchFunc = function (path, search_id, content_id) {
        'use strict';
        $.ajax({
            url: path,
            dataType: "xml",
            success: function (xmlResponse) {
                // get the contents from search data
                var datas = $("entry", xmlResponse).map(function () {
                    return {
                        title: $("title", this).text(),
                        content: $("content", this).text(),
                        url: $("url", this).text()
                    };
                }).get();
                var $input = document.getElementById(search_id);
                var $resultContent = document.getElementById(content_id);
                $input.addEventListener('input', function () {
                    var str = '<ul class=\"search-result-list\">';
                    var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                    $resultContent.innerHTML = "";
                    if (this.value.trim().length <= 0) {
                        return;
                    }
                    // perform local searching
                    datas.forEach(function (data) {
                        var isMatch = true;
                        var data_title = data.title.trim().toLowerCase();
                        var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                        var data_url = data.url;
                        data_url = data_url.indexOf('/') === 0 ? data.url : '/' + data_url;
                        var index_title = -1;
                        var index_content = -1;
                        var first_occur = -1;
                        // only match artiles with not empty titles and contents
                        if (data_title !== '' && data_content !== '') {
                            keywords.forEach(function (keyword, i) {
                                index_title = data_title.indexOf(keyword);
                                index_content = data_content.indexOf(keyword);
                                if (index_title < 0 && index_content < 0) {
                                    isMatch = false;
                                } else {
                                    if (index_content < 0) {
                                        index_content = 0;
                                    }
                                    if (i === 0) {
                                        first_occur = index_content;
                                    }
                                }
                            });
                        }
                        // show search results
                        if (isMatch) {
                            str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
                            var content = data.content.trim().replace(/<[^>]+>/g, "");
                            if (first_occur >= 0) {
                                // cut out 100 characters
                                var start = first_occur - 20;
                                var end = first_occur + 80;
                                if (start < 0) {
                                    start = 0;
                                }
                                if (start === 0) {
                                    end = 100;
                                }
                                if (end > content.length) {
                                    end = content.length;
                                }
                                var match_content = content.substr(start, end);
                                // highlight all keywords
                                keywords.forEach(function (keyword) {
                                    var regS = new RegExp(keyword, "gi");
                                    match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>");
                                });

                                str += "<p class=\"search-result\">" + match_content + "...</p>"
                            }
                            str += "</li>";
                        }
                    });
                    str += "</ul>";
                    $resultContent.innerHTML = str;
                });
            }
        });
    };

    searchFunc('/search.xml', 'searchInput', 'searchResult');
});
</script>

    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    <script src="/libs/materialize/materialize.min.js"></script>
    <script src="/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/libs/aos/aos.js"></script>
    <script src="/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/js/matery.js"></script>

    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    <script src="/libs/others/clicklove.js" async="async"></script>
    
    
    <script async src="/libs/others/busuanzi.pure.mini.js"></script>
    

    

    

    <!--腾讯兔小巢-->
    
    

    

    

    
    <script src="/libs/instantpage/instantpage.js" type="module"></script>
    


	
	<!--浏览器搞笑标题  自定义添加  -->
	<script type="text/javascript">
		var OriginTitile=document.title,st;
		document.addEventListener("visibilitychange",function(){
			document.hidden?(document.title="ヽ(●-`Д´-)ノ你要玩捉迷藏嘛",clearTimeout(st)):(document.title="(Ő∀Ő3)ノ好哦！",st=setTimeout(function(){document.title=OriginTitile},3e3))
		})
	</script>
	<!--动态线条背景-->
	<script type="text/javascript"
		color="122 103 238" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
	</script>
	<!--樱花飘落效果 themes/matery/source/js/sakura.js-->
	<script type="text/javascript">
	//只在桌面版网页启用特效
	var windowWidth = $(window).width();
	if (windowWidth > 768) {
		document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
	}
	</script>

<script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 1,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(n){n.imageLazyLoadSetting.processImages=i;var e=n.imageLazyLoadSetting.isSPA,r=(n.imageLazyLoadSetting.preloadRatio,Array.prototype.slice.call(document.querySelectorAll("img[data-original]")));function i(){e&&(r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")));for(var t,a=0;a<r.length;a++)0<=(t=(t=r[a]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(n.innerHeight+240||document.documentElement.clientHeight+240)&&function(){var t,e,n,i,o=r[a];t=o,e=function(){r=r.filter(function(t){return o!==t})},n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,e&&e()},t.src!==i&&(n.src=i)}()}i(),n.addEventListener("scroll",function(){var t,e;t=i,e=n,clearTimeout(t.tId),t.tId=setTimeout(function(){t.call(e)},500)})}(this);</script><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/haruto.model.json"},"display":{"position":"right","width":150,"height":300,"hOffset":20,"vOffset":-30},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.2},"log":false});</script></body>

</html>
